<template>
    <div class="content h-between-center">
        <div class="h-center">
            <img
                :src="require('../assets/img/png/logo' + '-header-' + $config.env.city + '.png')"
                height="30"
                width="30"
            />
            <div class="logo-title ell ml20">{{ $config.env.cityTitle }}</div>
        </div>
        <div class="h-center">
            <div class="mr40 button" @click="onMessageBtnClick">
                <a-badge :count="messageNotReadCount">
                    <svg-icon icon-class="message_icon" class="h-message mr10"></svg-icon>
                </a-badge>
            </div>
            <div class="avatar hBox vh-items-center vh-content-center mr10"></div>
            <a-dropdown placement="bottomCenter">
                <div class="admin-name mr12">
                    {{ $store.state.userInfo.realName || $store.state.userInfo.userName }}
                    <svg-icon icon-class="down"></svg-icon>
                </div>
                <a-menu slot="overlay" @click="menuClick" class="menu">
                    <!-- <a-menu-item key="roleChange">
              <div class="menu-item-content">身份切换</div>
          </a-menu-item> -->
                    <a-menu-item key="modification">
                        <div class="menu-item-content">密码修改</div>
                    </a-menu-item>
                    <a-menu-item key="baseInfo" v-if="$store.state.userInfo.roleCode < 3">
                        <div class="menu-item-content">基本信息</div>
                    </a-menu-item>
                    <a-menu-item key="logout">
                        <div class="menu-item-content">退出登录</div>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
        <password-change ref="passwordChange"></password-change>
        <a-modal
            v-if="showModal"
            title=""
            :visible="true"
            width="40%"
            :footer="null"
            dialogClass="custom-modal"
            :maskClosable="false"
            @cancel="handleCancel"
        >
            <a-spin :spinning="false">
                <base-info
                    :applyNeedData="applyNeedData"
                    :showModal.sync="showModal"
                    :showFooter="false"
                    :list="baseInfoList"
                ></base-info>
            </a-spin>
        </a-modal>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import PasswordChange from './setting/userPasswordChange/index'
import passwordChangeIcon from '../icons/svg/password-change.svg'
import returnLoginIcon from '../icons/svg/return-login.svg'
import Bus from '@/common/bus'
import { baseInfoDetail, messageGetNotRead } from '../common/api/setting'
import BaseInfo from '@/views/applyManage/applyComponents/modal/BaseInfo.vue'
export default {
    name: 'SelfHeader',
    components: { PasswordChange, BaseInfo },
    data() {
        const baseInfoList = [
            { label: '城市名称', key: 'cityName', formType: 'input', disabled: true },
            { label: '行政级别', key: 'xzjb', formType: 'select', disabled: true },
            {
                label: '行政隶属',
                key: 'xzls',
                formType: 'select',
                disabled: true,
            },
            { label: '创建工作领导组长', key: 'cjgzzyfzr', formType: 'tag' },
            { label: '创建工作主要负责人联系电话', key: 'cjgzzyfzrdh', formType: 'input' },
            { label: '安办主要负责人', key: 'abzyfzr', formType: 'input' },
            { label: '安办主要负责人联系电话', key: 'abzyfzrdh', formType: 'input' },
            { label: '日常工作联系人', key: 'rcgzlxr', formType: 'input' },
            { label: '日常工作联系人电话', key: 'rcgzlxrdh', formType: 'input' },
        ]
        return {
            passwordChangeIcon,
            returnLoginIcon,
            modal: {
                title: '检测到该账户拥有多个角色，请选择本次使用的角色',
                width: '40%',
                visible: false,
                roles: [],
            },
            showModal: false,
            baseInfoList,
            applyNeedData: {
                baseInfoDetail: {},
            },
            messageNotReadCount: 0,
        }
    },
    mounted() {
        Bus.$on('messageRefresh', this.getNotReadMessageCount)
        this.getNotReadMessageCount()
    },
    methods: {
        ...mapMutations([
            'setAreaList',
            'setSensorTypeList',
            'setNodeList',
            'setRoleList',
            'setOrgList',
            'setPermissionList',
            'setIsWarning',
        ]),
        async getBaseInfoDetail() {
            Bus.$emit('loadingStateChange', true)
            try {
                let res = await baseInfoDetail()
                if (res.code == 200) {
                    this.applyNeedData.baseInfoDetail = res.data
                    this.baseInfoList.forEach(item => {
                        if (item.key === 'xzjb') {
                            item.options = [
                                {
                                    value: this.applyNeedData.baseInfoDetail.xzjb,
                                    label: this.applyNeedData.baseInfoDetail.xzjbName,
                                },
                            ]
                        }
                        if (item.key === 'xzls') {
                            item.options = [
                                {
                                    value: this.applyNeedData.baseInfoDetail.xzls,
                                    label: this.applyNeedData.baseInfoDetail.xzlsName,
                                },
                            ]
                        }
                    })
                    this.showModal = true
                }
            } catch (e) {
                console.log(e)
            }
            Bus.$emit('loadingStateChange', false)
        },
        handleCancel() {
            this.showModal = false
        },
        getNotReadMessageCount() {
            messageGetNotRead().then(res => {
                this.messageNotReadCount = res.data
            })
        },
        onMessageBtnClick() {
            this.$router.push({ name: 'message' })
        },
        warningClick() {
            this.$router.push({ name: 'currentAlarm' })
        },
        menuClick({ key }) {
            console.log(key)
            if (key === 'roleChange') {
                this.modal.visible = true
            }
            if (key === 'modification') {
                this.$refs.passwordChange.modal.visible = true
                this.$refs.passwordChange.model.values = {
                    userName: this.$store.state.userInfo.userName,
                }
            } else if (key === 'logout') {
                localStorage.removeItem('userinfo')
                localStorage.removeItem('token')
                localStorage.removeItem('isLogin')
                sessionStorage.clear()
                this.$router.push({ name: 'login' })
            } else if (key === 'baseInfo') {
                this.getBaseInfoDetail()
            }
        },
    },
}
</script>

<style scoped lang="scss">
@import '../assets/styles/main';

$header-font-color: #fff;
.content {
    color: $header-font-color;
    font-size: 14px;

    .logo-title {
        height: 22px;
        font-size: 20px;
        font-family: AlibabaPuHuiTiH;
        font-weight: 800;
        text-align: left;
        line-height: 22px;
        letter-spacing: 3px;

        span {
            font-family: AlibabaPuHuiTiM;
        }
    }

    .sub-title {
        height: 9px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #162146;
        line-height: 9px;
        letter-spacing: 0px;
        transform: scale(0.5) translate(-50%, 0);
    }

    .admin-name {
        height: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        line-height: 14px;
        letter-spacing: 1px;
    }

    .button {
        cursor: pointer;
    }

    .avatar {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background-color: #8490b5;
        background-image: url(../assets/img/png/avatar.png);
    }

    .warning-icon {
        display: inline-block;
        width: 27px;
        height: 32px;
        background-size: contain;
        background-image: url(../assets/img/alarm.png);
    }

    .drop-down-link {
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        text-align: left;
        color: #0d1722;
        line-height: 14px;
        letter-spacing: 1px;
    }

    .h-message {
        font-size: 20px;
    }
}

.menu {
    padding: 10px;

    .menu-item-content {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        padding: 5px;
    }

    .ant-dropdown-menu-item:last-child .menu-item-content {
        margin-bottom: 0;
    }
}
</style>
